import React, { Component } from 'react';
import MyNavBar from '../../components/MyNavBar'
import { List, AutoSizer } from 'react-virtualized'
import HouseItem from '../../components/HouseItem'

class Rent extends Component {
    constructor() {
        super()
        this.state = {
            houseList: null
        }
    }
    componentDidMount() {
        this.getHouseList()
    }
    // 获取用户房屋列表
    getHouseList = async () => {
        let res = await this.axios.get("/user/houses")
        console.log(res, "res")
        this.setState({
            houseList: res.data.body
        })
    }
    // 渲染列表每一行
    rowRenderer = ({
        index, // Index of row
        isScrolling, // The List is currently being scrolled
        isVisible, // This row is visible within the List (eg it is not an overscanned row)
        key, // Unique key within array of rendered rows
        parent, // Reference to the parent List (instance)
        style, // Style object to be applied to row (to position it);
        // This must be passed through to the rendered row element.
    }) => {
        const item = this.state.houseList[index]
        // Style is required since it specifies how the row is to be sized and positioned.
        // React Virtualized depends on this sizing/positioning for proper scrolling behavior.
        // By default, the List component provides following style properties:
        //    position
        //    left
        //    top
        //    height
        //    width
        // You can add additional class names or style properties as you would like.
        // Key is also required by React to more efficiently manage the array of rows.
        return (
            <div key={key} style={style}>
                <HouseItem key={item.houseCode} {...item} />
            </div>
        );
    }
    render() {
        const { houseList } = this.state
        return (
            <div style={{height: "100%"}}>
                <MyNavBar title="发布房源" />
                {houseList && (
                    <AutoSizer>
                        {({ height, width }) => (
                            <List
                                width={width}
                                height={height}
                                rowHeight={120}
                                rowCount={houseList.length}
                                rowRenderer={this.rowRenderer}
                            />
                        )}
                    </AutoSizer>
                )}
            </div>
        );
    }
}

export default Rent;